<template>
  <div class="commentParent">
    <div v-for="(item,index) in commentlist" :key="index">
      <div class="commentItem">
        <div class="user_img">
          <img :src="item.userinfo.user_img" alt="" v-if="item.userinfo && item.userinfo.user_img" />
          <img src="@/assets/default.jpeg" alt="" v-else>
        </div>
        <div class="commentContent">
          <p>
            <span v-if="item.userinfo">{{item.userinfo.name}}</span>
            <span v-else>无名</span>
            <span>{{item.comment_date}}</span>
          </p>
          <div style="margin-bottom:8.333vw">
           {{item.comment_content}}
           <span class="publishs" @click="publishClick(item.comment_id)">回复</span>
          </div>
        </div>
      </div>
      <div class="allComment" style="padding-left:5.556vw">
        <next-title :commentchild="item.child" @PostPublish="publishClick" ></next-title>
      </div>
    </div>
  </div>
</template>
<script>
import nextTitle from "./commentnexttitle";
export default {
  components: {
    nextTitle,
  },
  data() {
    return {
        commentlist:{},
    };
  },
  methods: {
    async commentData() {
      const res = await this.$http.get("/comment/" + this.$route.params.id);
      if(res.data){
        this.$emit('lengtheslect',res.data.length)
      }
      this.commentlist = this.changeCommentPage(res.data)
    },
    changeCommentPage(data) {
      function fn(temp) {
        let arr1 = [];
        for (var i = 0; i < data.length; i++) {
          if (data[i].parent_id == temp) {
            arr1.push(data[i]);
            data[i].child = fn(data[i].comment_id);
          }
        }
        return arr1;
      }
        return fn(null);
    },
    publishClick(id){
      this.$emit('publishClick',id)
    }
  },
  created() {
    this.commentData();
  },
};
</script>
<style lang="scss">
.commentParent {
    width:95%;
  padding: 2.778vw 2.778vw;
  > div {
    border-bottom: 0.278vw solid #e7e7e7;
  }
  .commentItem {
    width:100%;
    display: flex;
    // margin-bottom: 2.778vw;
    // padding: 2.778vw 0;
    .commentContent {
      position: relative;
      flex: 1;
      p {
        font-size: 3.611vw;
        color: #555;
        display: flex;
        justify-content: space-between;
        margin-bottom: 1.389vw;
      }
      div {
        display: flex;
        font-size: 3.611vw;
      }
      .publishs{
        position: absolute;
        color:red;
        right:0;
      }
    }
    .user_img {
      margin-right: 2.778vw;
      img {
        width: 9.722vw;
        height: 9.722vw;
        border-radius: 50%;
      }
    }
  }
}
</style>